<template>
  <div class="rectification-container">
    <div class="template-button-container">
      <div style="display: flex">
        <div
          v-for="(item, i) in list"
          :key="item"
          @click="handleActive(i)"
          :class="activeIndex === i ? 'active button' : 'button'"
        >
          {{ item.name }} <span v-show="item.count">({{ item.count }})</span>
        </div>
      </div>
      <div>
        <el-button @click="handleSubmitAll" class="rectification-manager__buts" type="primary">发起客户确认</el-button>
        <el-button @click="handleSubmitPlay" class="rectification-manager__buts" type="primary">批量收款</el-button>
      </div>
    </div>
    <div class="construction-log" @scroll="loadMoreData" v-loading="isLoadingLog">
      <template v-if="logList.length">
        <div class="time-line">
          <el-timeline :reverse="true">
            <el-timeline-item v-for="(item, index) in logList" :key="item" type="primary" :hollow="true">
              <div class="time">
                <div>
                  <span class="year">{{ date(item.submitTime).value }}</span>
                </div>
                <div class="day">
                  <el-icon>
                    <Clock />
                  </el-icon>
                  <span>{{ time(item.submitTime).value }}</span>
                </div>
              </div>
              <div class="ml10">
                <div class="list-title">
                  <CustomAvatar :info="item" avatarName="submitUserName" :avatarStyle="avatarStyle" />
                  <span class="list-title-name">{{ item.submitUserName }}</span>
                  <el-divider direction="vertical" />
                  <span class="list-title-role">{{ item.submitUserRoleNames }}</span>
                </div>
                <div class="list-desc">
                  <div class="list-desc-header">
                    <el-row :gutter="24">
                      <el-col :span="6">
                        <div class="rectification-type ellipsis" @click="handelApplicationCriteria(item)">
                          <span class="type-label">{{ nameTitle }}分类：</span>
                          <el-tooltip :content="reformTypeLabel(item).value || ''" placement="top" effect="light">
                            <span class="type-value" :class="{ 'type-value-active': item.hasReformTypeStandard }">
                              {{ reformTypeLabel(item).value }}
                            </span>
                          </el-tooltip>
                        </div>
                      </el-col>
                      <el-col :span="3">
                        <span>预计工期：{{ item.plainDuration }}天</span>
                      </el-col>
                      <el-col :span="3">
                        <span style="color: #ff3333" v-if="delayDays(item).value !== '0天'"
                          >已延期：{{ delayDays(item).value }}</span
                        >
                      </el-col>
                      <el-col :span="9">
                        <span>计划时间：{{ plainTime(item).value }}</span>
                      </el-col>
                      <el-col :span="3" style="text-align: right">
                        <div class="status-tag" :class="`status-tag-${reformStateStateLabel(item.reformState).value[0]}`">
                          {{ reformStateStateLabel(item.reformState).value[1] }}
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="list-desc-content">
                    <el-row :gutter="24">
                      <el-col :span="8">
                        <span
                          >预算报价变更单：<text @click="handleGotoBudge(item)">{{ item.exchangeBudgetId }}</text></span
                        >
                      </el-col>
                      <el-col :span="8">
                        <span>
                          {{ showCustomerprict(item) }}
                        </span>
                      </el-col>
                      <el-col :span="8">
                        <span
                          >{{ item.refundedAmount ? "未退" : "未收" }}款金额：¥{{
                            item.refundedAmount ? item.refundedAmount : item.receivedAmount
                          }}
                        </span>
                      </el-col>
                      <el-col :span="24">
                        <span class="ellipsis-clamp3"
                          >问题描述：
                          <el-tooltip :content="item.reformDesc || ''" placement="bottom" effect="light">
                            {{ item.reformDesc || "" }}
                          </el-tooltip>
                        </span>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
              <div class="options-button">
                <div>
                  <div v-show="item.isVisible" class="options-button-show">
                    <div class="circle"></div>
                    <span>业主可见</span>
                  </div>
                </div>
                <div class="contract-materials-buttons">
                  <div v-for="(items, i) in getVisibleButtons(item)" :key="items" style="display: flex; align-items: center">
                    <div @click="items.action">{{ items.text }}</div>
                    <div class="divider-grey" v-if="i < getVisibleButtons(item).length - 1"></div>
                  </div>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </template>
      <el-empty v-else />
      <!-- 申请标准 start-->
      <div class="application-dialog">
        <el-dialog v-model="isShowApplicationDialog" width="544" :show-close="false" @close="handelApplicationCancel">
          <template #header>
            <title-view title="申请标准" isClose @close="handelApplicationCancel" />
          </template>
          <el-form :model="applicationForm" label-width="auto" v-if="isShowApplicationDialog" v-loading="isLoadingInfo">
            <!--          <el-form-item label="业主可见">-->
            <!--            <el-input v-model="applicationForm.businessCheckDesc" disabled />-->
            <!--          </el-form-item>-->
            <el-form-item label="汇报标准">
              <el-input v-model="applicationForm.standardDesc" type="textarea" disabled :autosize="{ minRows: 4 }" />
            </el-form-item>
            <el-form-item label="上传图片">
              <image-video-upload :file-list="picData" disabled />
            </el-form-item>
            <el-form-item label="上传视频">
              <image-video-upload :file-list="videoData" disabled fileType="video" />
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- 申请标准 end -->

      <!-- 任务明细 start-->
      <div class="client-follow-drawer">
        <el-drawer v-model="isTaskDetailDrawer" :with-header="false" :close-on-click-modal="false" destroy-on-close>
          <div class="stage-follow-up" v-loading="isTaskDetailLoading" element-loading-text="数据加载中...">
            <title-view title="任务明细" isClose @close="handelCloseTaskDetail" />
            <div class="content-tasks">
              <div class="content-tasks-list" ref="instructionsTitle">
                <template v-if="taskList.length">
                  <div class="content-tasks-list-item" v-for="item in taskList" :key="item.stageTaskId">
                    <div class="list-item-options">
                      <div class="list-item-options-icon"></div>
                      <div class="list-item-options-type">【{{ nameTitle }}】</div>
                      <div class="list-item-options-label">{{ item.taskName }}</div>
                      <el-button type="primary" link @click="handelShowInstructions(item)">补充说明</el-button>
                    </div>
                    <div class="list-item-info">
                      <div class="list-item-info-item"><span>人员：</span>{{ item.userName }}</div>
                      <div class="list-item-info-item">
                        <span>任务开始时间：</span>
                        <span>{{ taskDetailStarTime(item).value }}</span>
                        <span class="view-form" v-if="item.status == 3" @click="handelCheckStage(item)">查看</span>
                      </div>
                    </div>
                  </div>
                </template>
                <el-empty v-else />
              </div>
            </div>
          </div>
        </el-drawer>
        <Transition name="fade">
          <div class="instructions-container" ref="instructionsContainer" v-show="instructionsVisible">
            <div class="arrow"></div>
            <title-view title="补充说明" isClose @close="handelCloseInstructions" />
            <div class="editor-container" v-html="instructionsText"></div>
          </div>
        </Transition>
      </div>
      <!-- 任务明细 end-->
    </div>
    <!--  start 已完成任务查看详情-->
    <formDetailDialog v-if="showFormDetail" v-model="showFormDetail" :currentFormParams="currentFormParams"></formDetailDialog>
    <!--  end 已完成任务查看详情-->
    <div class="delete-dialog">
      <!-- 发起客户确认   -->
      <el-dialog :show-close="false" v-model="visible" title="发起客户确认" width="450px" center>
        <template #header>
          <div style="font-weight: 400; font-size: 18px; color: #3d3d3d; display: flex; align-items: center">
            <div style="width: 6px; height: 6px; background: #409eff; border-radius: 50%; margin-right: 10px"></div>
            发送客户确认 <span style="color: #86909c; font-size: 12px">（仅需客户确认的单据会向客户发送通知）</span>
          </div>
        </template>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" label-position="top">
          <el-form-item label="请选择售后单状态" prop="reformState">
            <el-select placeholder="选择择" v-model="ruleForm.reformState">
              <el-option label="全部" :value="0" />
              <el-option label="待发起客户确认" :value="8" />
              <el-option label="客户拒绝" :value="10" />
            </el-select>
          </el-form-item>
          <el-form-item label="请选择售后单类型" prop="afterSalesType">
            <el-select placeholder="选择择" v-model="ruleForm.afterSalesType">
              <el-option label="全部" :value="0" />
              <el-option label="整改" :value="1" />
              <el-option label="增减项" :value="3" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer" style="text-align: center">
            <el-button @click="visible = false" color="#F2F3F5">取消</el-button>
            <el-button type="primary" @click="handleSubmit">发起确认</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 批量收款   -->
    <pay-dialog ref="payDialogRef" />
  </div>
</template>
<script setup>
/**
 * TODO:整改和施工日志，时间线组件相同，后续优化可封装
 *  TODO：时间线组件和全局组件TimeLine组件可合并，并封装为通用全局组件
 */
import { nextTick, onUnmounted, ref, getCurrentInstance } from "vue";
import { dayjs, ElMessage, ElMessageBox } from "element-plus";
import _ from "lodash";
import CustomAvatar from "@/components/AvatarView/index.vue";
import useComputedParams from "@/hooks/useComputedParams";
import formDetailDialog from "./components/formDetailDialog.vue";
import { rectificationList, rectificationDetail, rectificationStandard, rectificationCount } from "@/apis/rectification";
import { Clock } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import {
  deleteTask,
  reformDelete,
  revokeCustomer,
  sendCustomerConfirmBatch,
  sendCustomerConfirmSingle,
  startTask
} from "@/apis/rectificationManager";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const props = defineProps({
  customerId: {
    type: String,
    default: ""
  }
});
const payDialogRef = ref(null);
const visible = ref(false);
const ruleForm = ref({
  reformState: 0,
  afterSalesType: 0
});
const ruleFormRef = ref();
const rules = ref({
  reformState: { required: true, message: "请选择售后单状态", trigger: "change" },
  afterSalesType: { required: true, message: "请选择售后单类型", trigger: "change" }
});
const avatarStyle = {
  width: "32px",
  height: "32px",
  borderRadius: "50%"
};
const getVisibleButtons = row => {
  const buttons = [
    {
      command: 0,
      condition: () => row.reformState !== 6,
      text: "查看详情",
      action: () => handleDetail(row)
    },
    {
      command: 1,
      condition: () => [1, 5, 8, 10].includes(row.reformState),
      text: "编辑",
      permission: ["crm:rectificationManager:edit"],
      action: () => handelGoEdit(row)
    },
    {
      command: 2,
      condition: () => ![10, 11].includes(row.assignBlameState) && [2, 3, 4, 11].includes(row.reformState),
      text: "判责",
      permission: ["crm:rectificationManager:judgment"],
      action: () => handelJudgment(row)
    },
    {
      command: 3,
      condition: () =>
        [1, 5, 8, 10, 2, 11].includes(row.reformState) &&
        Number(row.alreadyPutAmount) === 0 &&
        Number(row.alreadyRefundAmount) === 0,
      text: "作废",
      action: () => handleRevocation(row, 4)
    },
    {
      command: 4,
      condition: () => [7].includes(row.reformState),
      text: "撤销审批",
      action: () => handleRevocation(row, 0)
    },
    {
      command: 6,
      condition: () => [8, 10].includes(row.reformState),
      text: "发起客户确认",
      action: () => handleRevocation(row, 1)
    },
    {
      command: 7,
      condition: () => [9].includes(row.reformState),
      text: "撤销客户确认",
      action: () => handleRevocation(row, 2)
    },
    {
      command: 8,
      condition: () => [11].includes(row.reformState),
      text: "确认" + nameTitle.value,
      action: () => handleRevocation(row, 3),
      permission: ["crm:rectificationManager:changes"]
    },
    {
      command: 9,
      condition: () => true,
      text: "任务明细",
      action: () => handelTaskDetail(row)
    },
    {
      command: 10,
      condition: () => [2, 3, 4, 11].includes(row.reformState) && Number(row.shouldAmount) > Number(row.alreadyPutAmount) && row.slipId,
      text: "收款",
      action: () => handlePlayVisible(row)
    }
  ];
  return buttons.filter(btn => btn.condition());
};

// 编辑
const handelGoEdit = row => {
  if (row.exchangeBudgetId) {
    const baseRouter = window.microApp.router.getBaseAppRouter();
    const routeUrl = baseRouter.resolve({
      path: "/designer/quote-price/following/change",
      query: {
        budgetId: row.budgetId,
        contractId: row.contractId,
        customerId: row.customerId,
        reformId: row.reformId,
        afterSalesType: nameTitle.value === "整改" ? 1 : 3
      }
    });
    window.open(routeUrl.href, "_blank");
  } else {
    router.push({
      path: "/after-sales-order",
      query: {
        reformId: row.reformId,
        afterSalesType: nameTitle.value === "整改" ? 1 : 3
      }
    });
  }
};
// 跳转判责
const handelJudgment = row => {
  router.push({ path: "/judgment-add", query: { reformId: row.reformId } });
};

// 撤销审批
const handleRevocation = (row, i) => {
  const nameList = ["撤销审批", "发起客户确认", "撤销客户确认", "确认" + nameTitle.value, "作废"];
  const textList = [
    "你确定要撤销此单据吗?",
    "确定发起客户确认？",
    "确定撤回消息确认？",
    "确定不收款可开启任务吗？",
    "你确定要作废此单据吗？"
  ];
  if (row.isBatchMsg === 1 && i === 2) {
    textList[i] = "本次会撤销一同发起客户确认的多个单据，确定撤销？";
  }
  ElMessageBox.confirm(textList[i], nameList[i], {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    center: true,
    customClass: "message-box",
    beforeClose: async (action, instance, done) => {
      if (action === "confirm") {
        switch (i) {
          case 0:
            await deleteTask(row.reformId);
            logList.value = [];
            params.value.current = 1;
            await getRectificationList();
            ElMessage({
              type: "success",
              message: "撤销成功"
            });
            done();
            break;
          case 1:
            await sendCustomerConfirmSingle(row.reformId);
            logList.value = [];
            params.value.current = 1;
            await getRectificationList();
            ElMessage({
              type: "success",
              message: "发起成功"
            });
            done();
            break;
          case 2:
            await revokeCustomer(row.msgId);
            logList.value = [];
            params.value.current = 1;
            await getRectificationList();
            ElMessage({
              type: "success",
              message: "撤销成功"
            });
            done();
            break;
          case 3:
            await startTask({ reformId: row.reformId });
            logList.value = [];
            params.value.current = 1;
            await getRectificationList();
            ElMessage({
              type: "success",
              message: "确认" + nameTitle.value + "成功"
            });
            done();
            break;
          case 4:
            await reformDelete(row.reformId);
            logList.value = [];
            params.value.current = 1;
            await getRectificationList();
            done();
            break;
        }
      } else {
        done();
      }
    }
  });
};
// 收款
const handlePlayVisible = row => {
  payDialogRef.value.open({
    customerId: row.customerId,
    customerName: row.customerName,
    reformId: [row.reformId],
    slipId: [row.slipId],
    sumMoneys: ((Number(row.shouldAmount || 0) * 100 - Number(row.alreadyPutAmount || 0) * 100) / 100).toFixed(2)
  });
};
const reformStateState = new Map([
  [1, ["warning", "待审核"]],
  [2, ["warning", "待开始"]],
  [3, ["primary", "进行中"]],
  [4, ["success", "已完成"]],
  [5, ["danger", "未通过"]],
  [6, ["info", "已作废"]],
  [7, ["primary", "审批中"]],
  [8, ["warning", "待发起客户确认"]],
  [9, ["primary", "客户确认中"]],
  [10, ["danger", "客户拒绝"]],
  [11, ["warning", "待收款"]]
]);
const list = ref([
  {
    name: "整改",
    count: 0
  },
  {
    name: "增减项",
    count: 0
  }
]);
const nameTitle = ref("整改");
const activeIndex = ref(0);
// 切换 tabs
const handleActive = i => {
  activeIndex.value = i;
  logList.value = [];
  params.value.current = 1;
  nameTitle.value = i === 0 ? "整改" : "增减项";
  getRectificationList();
};
if (route.query.afterSalesType) {
  activeIndex.value = route.query.afterSalesType === "1" ? 0 : 1;
  nameTitle.value = route.query.afterSalesType === "1" ? "整改" : "增减项";
}
const getRectificationCount = async () => {
  const { data } = await rectificationCount(props.customerId);
  list.value = [
    {
      name: "整改",
      count: data.reformCount || 0
    },
    {
      name: "增减项",
      count: data.changeCount || 0
    }
  ];
};

getRectificationCount();
/**
 * 整改分类
 */
const reformTypeLabel = useComputedParams(data => {
  let html = "";
  if (data.firstReformTypeName) {
    html += data.firstReformTypeName + "-";
  }
  if (data.secondReformTypeName) {
    html += data.secondReformTypeName + "-";
  }
  if (data.reformTypeName) {
    html += data.reformTypeName;
  }
  return html;
});

const isLoadingLog = ref(false);
const isMore = ref(true);
const params = ref({
  customerId: props.customerId,
  current: 1,
  size: 10
});
const logList = ref([]);
const date = useComputedParams(time => {
  return dayjs(time).format("YYYY-MM-DD");
});
const time = useComputedParams(time => {
  return dayjs(time).format("HH:mm:ss");
});

const reformStateStateLabel = useComputedParams(state => {
  return reformStateState.has(state) ? reformStateState.get(state) : ["info", "未知"];
});
const taskDetailStarTime = useComputedParams(item => {
  let label = "";
  (() => {
    switch (item.status) {
      case 1:
        return (label = item.plainStartDate ? dayjs(item.plainStartDate).format("YYYY-MM-DD") : "未设置");
      case 2:
        return (label = "已开始");
      case 3:
        return (label = "已完成");
      default:
        return (label = "未知");
    }
  })();
  return label;
});
const delayDays = useComputedParams(data => {
  return data.delayDays && data.delayDays > 0 ? `${data.delayDays}天` : "0天";
});
const plainTime = useComputedParams(data => {
  return data.packagePlainStartDate && data.packagePlainEndDate
    ? `${data.packagePlainStartDate} ~ ${data.packagePlainEndDate}`
    : "";
});
const getRectificationList = async () => {
  try {
    isLoadingLog.value = true;
    const { data } = await rectificationList({
      ...params.value,
      afterSalesType: nameTitle.value === "整改" ? 1 : 3
    });
    const reqData =
      data?.list?.map(item => {
        return {
          ...item,
          picList: item.picUrls ? item.picUrls?.split(",") : [],
          videoList: item.videoUrls ? item.videoUrls?.split(",") : []
        };
      }) || [];
    logList.value = logList.value.concat(reqData);
    isMore.value = logList.value.length < data.total;
    isLoadingLog.value = false;
  } catch (err) {
    isLoadingLog.value = false;
  }
};

const loadMoreData = e => {
  if (!isMore.value) return;
  const { scrollTop, scrollHeight, clientHeight } = e.target;
  if (scrollTop + clientHeight >= scrollHeight) {
    params.value.current++;
    getRectificationList();
  }
};

/**
 * 申请标准
 */
const isShowApplicationDialog = ref(false);
const isLoadingInfo = ref(false);
const initApplicationForm = {
  standardDesc: "",
  picUrls: "",
  picIds: "",
  videoUrls: "",
  videoIds: ""
};
const applicationForm = ref({ ...initApplicationForm });
const picData = ref([]);
const videoData = ref([]);
const handelDetailData = data => {
  const picUrls = data.picUrls ? data.picUrls.split(",") : [];
  const picIds = data.picIds ? data.picIds.split(",") : [];
  const videoUrls = data.videoUrls ? data.videoUrls.split(",") : [];
  const videoIds = data.videoIds ? data.videoIds.split(",") : [];
  picData.value = picUrls.map((item, index) => {
    return {
      fileUrl: item,
      fileName: "",
      fileId: picIds[index]
    };
  });
  videoData.value = videoUrls.map((item, index) => {
    return {
      fileUrl: item,
      fileName: "",
      fileId: videoIds[index]
    };
  });
};
const handelApplicationCriteria = async item => {
  if (!item.hasReformTypeStandard) return;
  isShowApplicationDialog.value = true;
  try {
    isLoadingInfo.value = true;
    const { data } = await rectificationStandard(item.reformTypeId);
    handelDetailData(data);
    applicationForm.value = data ?? {};
    isLoadingInfo.value = false;
  } catch (err) {
    isLoadingInfo.value = false;
  }
};
const handelApplicationCancel = () => {
  isShowApplicationDialog.value = false;
  applicationForm.value = { ...initApplicationForm };
  picData.value = [];
  videoData.value = [];
};
const showCustomerprict = e => {
  if (e.customerTotalPaymentDue !== null || e.customerTotalPaymentDue === "0.00") {
    return "需收款金额：¥" + e.customerTotalPaymentDue;
  } else if (e.customerTotalCollectionAmount !== null) {
    return "需退款金额：¥" + e.customerTotalCollectionAmount;
  }
};
const isTaskDetailDrawer = ref(false);
const isTaskDetailLoading = ref(false);
const taskList = ref([]);
const handelTaskDetail = async dataItem => {
  isTaskDetailDrawer.value = true;
  try {
    isTaskDetailLoading.value = true;
    const { data } = await rectificationDetail(dataItem.reformId);
    taskList.value = data || [];
    isTaskDetailLoading.value = false;
  } catch (err) {
    isTaskDetailLoading.value = false;
  }
};
const handelCloseTaskDetail = () => {
  isTaskDetailDrawer.value = false;
  instructionsVisible.value = false;
};

const instructionsVisible = ref(false);
const instructionsLeft = ref("0px");
const instructionsTop = ref("40px");
const arrowLeft = ref("0px");
const arrowTop = ref("40px");
const instructionsWidth = ref(400);
const instructionsText = ref("");
const handelShowInstructions = async data => {
  instructionsVisible.value = true;
  await nextTick();
  instructionsText.value = data.remark;
  const instructionsTitleEl = proxy.$refs.instructionsTitle;
  const instructionsTitleRect = instructionsTitleEl.getBoundingClientRect();
  instructionsLeft.value = `${instructionsTitleRect.left - instructionsWidth.value - 40}px`;
  instructionsTop.value = `${instructionsTitleRect.top}px`;
  arrowLeft.value = `${instructionsTitleRect.left - 41}px`;
  arrowTop.value = `${instructionsTitleRect.top + 10}px`;
  window.addEventListener("resize", handleResize);
};
const handelCloseInstructions = () => {
  window.removeEventListener("resize", handleResize);
  instructionsVisible.value = false;
};
let initialInstructionsWidth;
const handleResize = _.debounce(() => {
  const instructionsTitleEl = proxy.$refs.instructionsTitle;
  if (!instructionsTitleEl) return;
  const instructionsTitleRect = instructionsTitleEl.getBoundingClientRect();
  // 获取初始宽度，确保在首次渲染后进行
  if (!initialInstructionsWidth) {
    initialInstructionsWidth = instructionsWidth.value;
  }
  instructionsLeft.value = `${instructionsTitleRect.left - initialInstructionsWidth - 40}px`;
  instructionsTop.value = `${instructionsTitleRect.top}px`;
  arrowLeft.value = `${instructionsTitleRect.left - 41}px`;
  arrowTop.value = `${instructionsTitleRect.top + 10}px`;
}, 10);

//查看详情
const showFormDetail = ref(false);
const currentFormParams = ref({});
const handelCheckStage = dataItem => {
  showFormDetail.value = true;
  currentFormParams.value = dataItem;
};
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
const handleDetail = item => {
  router.push({
    path: "/after-sales-order-detail",
    query: {
      reformId: item.reformId,
      show: 1,
      afterSalesType: nameTitle.value === "整改" ? 1 : 3
    }
  });
};
// 跳转商场预算报价增减项单
const handleGotoBudge = item => {
  const baseRouter = window.microApp.router.getBaseAppRouter();
  const routeUrl = baseRouter.resolve({
    path: "/designer/quote-price/following/exchangeHistory",
    query: {
      exchangeBudgetId: item.exchangeBudgetId
    }
  });
  window.open(routeUrl.href, "_blank");
};
// 点击批量发起客户确认
const handleSubmitAll = async () => {
  visible.value = true;
};
// 批量发起客户确认
const handleSubmit = async () => {
  await ruleFormRef.value.validate(async valid => {
    if (!valid) return;
    const { msg } = await sendCustomerConfirmBatch({
      ...ruleForm.value,
      customerIds: [route.query.customerId]
    });
    ElMessage.success(msg);
    logList.value = [];
    params.value.current = 1;
    await getRectificationList();
    visible.value = false;
  });
};
// 批量收款
const handleSubmitPlay = () => {
  payDialogRef.value?.openVisible(route.query.customerId);
};
getRectificationList();
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";
@use "index";

.preview-dialog {
  :deep(.el-dialog) {
    video {
      width: 100%;
      height: 50vh !important;
    }
  }
}

// 操作说明
.instructions-container {
  @include mixin.flex-column;
  overflow: auto;
  position: fixed;
  left: v-bind(instructionsLeft);
  top: v-bind(instructionsTop);
  z-index: 9999;
  width: 400px;
  height: 90vh;
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;

  .arrow {
    position: fixed;
    left: v-bind(arrowLeft);
    top: v-bind(arrowTop);
    z-index: 9999;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-left: 14px solid #fff;
  }

  .editor-container {
    flex: 1;
    width: 100%;
    overflow: auto;
  }
}

// 状态
.status-tag {
  @include mixin.flex-inline-flex;
  height: 20px;
  border-radius: 2px;
  padding: 0 5px;
  border: 1px solid #ffffff;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  margin-right: 10px;
  // 已生效待整改-未开始
  &-info {
    background-color: #dcdfe6 !important;
    color: #606266 !important;
  }

  // 未通过
  &-danger {
    background-color: #ffc7c7 !important;
    color: #ff3333 !important;
  }

  // 审核中
  &-warning {
    background-color: #fff0d9 !important;
    color: #ff9900 !important;
  }

  // 进行中
  &-primary {
    background-color: #d9edff !important;
    color: #409eff !important;
  }

  // 已完成
  &-success {
    background-color: #e3f9e9 !important;
    color: #14c85c !important;
  }
}

.view-form {
  margin-left: 10px;
  display: inline-block;
  color: #007dff !important;
  cursor: pointer;
}
</style>
